<!-- 开发商返还款 提交 -->
<template>
  <div class="addPayment">
    <el-breadcrumb separator="/" class="bread-title">
      <el-breadcrumb-item :to="{ path: './developerPayment' }">开发商返还款列表</el-breadcrumb-item>
      <el-breadcrumb-item>返还款付款单</el-breadcrumb-item>
    </el-breadcrumb>
    <div style="line-height:50px;">
      <span style="font-weight:bold">返还款支付清单</span>
      <span>{{code}}</span>
    </div>
    <div class="tabs">
      <el-button
        @click="btnClick(1)"
        :type="btnType == 1 ? 'primary' : 'default'"
        size="small"
      >返还款支付</el-button>
      <el-button
        @click="btnClick(2)"
        :type="btnType == 2 ? 'primary' : 'default'"
        size="small"
      >收款方账号</el-button>
      <el-button
        @click="btnClick(3)"
        :type="btnType == 3 ? 'primary' : 'default'"
        size="small"
      >付款方账号</el-button>
      <el-button @click="btnClick(4)" :type="btnType == 4 ? 'primary' : 'default'" size="small">上传附件</el-button>
    </div>
    <el-form
      :model="ruleForm"
      :label-width="'180px'"
      :label-position="'right'"
      :rules="rules"
      size="small"
      ref="ruleForm"
    >
      <div v-show="btnType == 1 ? true : false">
        <div class="title">
          <p class="title_p">基本信息</p>
          <div class="form_algin">
            <div>
              <el-form-item label="项目名称：" prop="projectId">
                <el-select
                  class="select_item"
                  @change="itemsChange"
                  filterable
                  v-model="ruleForm.projectId"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in items"
                    :key="item.estateProjectId"
                    :label="item.projectName"
                    :value="item.estateProjectId"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="楼盘名称：" prop="devId">
                <el-select
                  class="select_item"
                  @focus="devFocus"
                  @change="devChange"
                  filterable
                  v-model="ruleForm.devId"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in devList"
                    :key="item.devId"
                    :label="item.devName"
                    :value="item.devId">
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="返还款累计金额：">
                <el-input disabled v-model="ruleForm.totalAmount"></el-input>
                <span>元</span>
              </el-form-item>
              <el-form-item label="返还款已付金额：">
                <el-input disabled v-model="ruleForm.returnAmount"></el-input>
                <span>元</span>
              </el-form-item>
              <el-form-item label="返还款冻结金额：">
                <el-input disabled v-model="ruleForm.frozenAmount"></el-input>
                <span>元</span>
              </el-form-item>
              <el-form-item label="返还款剩余金额：">
                <el-input disabled v-model="ruleForm.notReturnAmount"></el-input>
                <span>元</span>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="付款用途：" prop="payUse">
                <el-select class="select_item" v-model="ruleForm.payUse" placeholder="请选择">
                  <el-option
                    v-for="item in purPayment"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否有合同：" prop="contractHave">
                <el-radio-group
                  @change="radioChange"
                  class="select_item"
                  v-model="ruleForm.contractHave"
                >
                  <el-radio :label="1">是</el-radio>
                  <el-radio :label="0">否</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="申请人：">
                <span class="select_item" style="display:block">{{userName}}</span>
              </el-form-item>
              <el-form-item label="付款摘要：" prop="remark">
                <el-input
                  placeholder="请输入"
                  show-word-limit
                  maxlength="150"
                  :autosize="{ minRows: 4, maxRows: 8}"
                  class="select_item"
                  type="textarea"
                  v-model="ruleForm.remark"
                ></el-input>
              </el-form-item>
            </div>
          </div>
        </div>
        <!-- 合同信息字段手动带出 -->
        <div class="title" v-if="isContractHave">
          <p class="title_p">合同信息</p>
          <div class="form_algin">
            <div>
              <el-form-item label="合同名称：" prop="contractName">
                <el-input
                  suffix-icon="el-icon-search"
                  @focus="contracts"
                  v-model="ruleForm.contractName"
                ></el-input>
              </el-form-item>
              <el-form-item label="合同总金额（含税）：">
                <el-input disabled v-model="ruleForm.contractAmount"></el-input>
                <span>元</span>
              </el-form-item>
              <el-form-item label="未付款金额（含税）：">
                <el-input disabled v-model="ruleForm.notPayAmount"></el-input>
                <span>元</span>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="合同编号：">
                <el-input disabled v-model="ruleForm.contractCode"></el-input>
              </el-form-item>
              <el-form-item label="累计已付款金额（含税）：">
                <el-input disabled v-model="ruleForm.paidAmountTotal"></el-input>
                <span>元</span>
              </el-form-item>
              <el-form-item label="合同性质：">
                <el-input disabled v-model="ruleForm.contractNature"></el-input>
              </el-form-item>
            </div>
          </div>
        </div>
        <div class="title">
          <p class="title_p">付款信息</p>
          <div class="form_algin">
            <div>
              <el-form-item label="付款金额（含税）：" prop="payAmount">
                <el-input @change="focusAmount" v-model="ruleForm.payAmount"></el-input>
                <span>元</span>
              </el-form-item>
              <el-form-item label="税率：" prop="taxRate">
                <el-input @change="focusAmount" v-model="ruleForm.taxRate"></el-input>
                <span>%</span>
              </el-form-item>
              <el-form-item label="税金：">
                <el-input disabled v-model="ruleForm.payTax"></el-input>
                <span>元</span>
              </el-form-item>
              <el-form-item label="付款金额（不含税）：">
                <el-input disabled v-model="ruleForm.payAmountNoTax"></el-input>
                <span>元</span>
              </el-form-item>
              <el-form-item label="实际付款金额：" prop="realAmount">
                <el-input min="1" v-model="ruleForm.realAmount"></el-input>
                <span>元</span>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="结算支付方式：" prop="paymentType">
                <el-select class="select_item" v-model="ruleForm.paymentType" placeholder="请选择">
                  <!-- <el-option label="通过银企直连付款（对公）" :value="1"></el-option>
                  <el-option label="通过银企直连付款（对私）" :value="2"></el-option> -->
                  <el-option label="转账" :value="3"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="是否有发票：" prop="billHava">
                <el-select
                  class="select_item"
                  @change="billHavaChange"
                  v-model="ruleForm.billHava"
                  placeholder="请选择"
                >
                  <el-option label="有" :value="1"></el-option>
                  <el-option label="无" :value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item v-if="isBill" label="发票类型：" prop="billType">
                <el-select class="select_item" v-model="ruleForm.billType" placeholder="请选择">
                  <el-option label="增值税专用发票" :value="1"></el-option>
                  <el-option label="普通发票" :value="2"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="计税方式：" prop="taxType">
                <el-select class="select_item" v-model="ruleForm.taxType" placeholder="请选择">
                  <el-option label="一般" :value="1"></el-option>
                  <el-option label="简易" :value="2"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
        </div>
      </div>
      <div v-show="btnType == 2 ? true : false">
        <div class="title">
          <p class="title_p">收款方账号</p>
          <div class="form_algin">
            <div>
              <el-form-item label="收款方名称：" prop="receiveName">
                <el-input v-model="ruleForm.receiveName"></el-input>
              </el-form-item>
              <el-form-item label="收款方类型：" prop="receiveType">
                <el-radio-group class="select_item" v-model="ruleForm.receiveType">
                  <el-radio :label="2">公司</el-radio>
                  <el-radio :label="1">个人</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="开卡省-市：" prop="receiveCardProvince">
                <el-select
                  style="width:160px"
                  filterable
                  @change="provinceChange"
                  v-model="ruleForm.receiveCardProvince"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in provincesList"
                    :key="item.provinceid"
                    :label="item.province"
                    :value="item.provinceid"
                  ></el-option>
                </el-select>
                <el-form-item style="display:inline-block;" prop="receiveCardCity">
                  <el-select
                    style="width:160px"
                    filterable
                    @change="cityChange"
                    v-model="ruleForm.receiveCardCity"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="item in cityList"
                      :key="item.cityId"
                      :label="item.city"
                      :value="item.cityId"
                    ></el-option>
                  </el-select>
                </el-form-item>
              </el-form-item>

              <el-form-item label="开户行（支行）：" prop="receiveBankBranch">
                <el-select
                  class="select_item"
                  @focus="bankFocus"
                  @change="bankChange"
                  filterable
                  v-model="ruleForm.receiveBankBranch"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in bankList"
                    :key="item.linkNumber"
                    :label="item.bankBranchName"
                    :value="item.linkNumber"
                  ></el-option>
                </el-select>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="收款方账号：" prop="receiveAccount">
                <el-input v-model="ruleForm.receiveAccount"></el-input>
              </el-form-item>
              <el-form-item label="联行号：">
                <el-input disabled v-model="ruleForm.receiveLinkNumber"></el-input>
              </el-form-item>
              <el-form-item label="开户编码：">
                <el-input disabled v-model="ruleForm.receiveAccountCode"></el-input>
              </el-form-item>
              <el-form-item label="手机号：" prop="receivePhone">
                <el-input v-model="ruleForm.receivePhone"></el-input>
              </el-form-item>
            </div>
          </div>
        </div>
      </div>
      <div v-show="btnType == 3 ? true : false">
        <div class="title">
          <p class="title_p">付款方账号</p>
          <div class="form_algin">
            <div>
              <el-form-item label="付款方名称：" prop="paymentName">
                <el-select
                  filterable
                  class="select_item"
                  @change="payerNameChange"
                  v-model="ruleForm.paymentName"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in payerNameList"
                    :key="item.id"
                    :label="item.companyName"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="纳税人识别号：">
                <el-input disabled v-model="ruleForm.paymentTaxNumber"></el-input>
              </el-form-item>
            </div>
            <div>
              <el-form-item label="付款方账号：" prop="paymentAccount">
                <el-select
                  filterable
                  class="select_item"
                  @change="payerAccountChange"
                  v-model="ruleForm.paymentAccount"
                  placeholder="请选择"
                >
                  <el-option
                    v-for="item in payerAccountList"
                    :key="item.id"
                    :label="item.bankAccount"
                    :value="item.id"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="开户行（支行）：">
                <el-input disabled v-model="ruleForm.paymentBankBranch"></el-input>
              </el-form-item>
            </div>
          </div>
        </div>
      </div>
      <div v-show="btnType == 4 ? true : false">
        <div class="title">
          <p>上传附件</p>
          <upload 
            ref="upload" 
            :fileList="fileList" 
            :accept="'.jpg,.jpeg,.png,.pdf,.doc,.docx,.xls,.xlsx'" 
            :multiple="true">
          </upload>
        </div>
      </div>
      <div style="width:100%;height:1px;box-sizing: border-box;margin:25px 0; background:#E4E7ED;"></div>
      <el-form-item size="large" class="formCenter">
        <el-button @click="resetForm('ruleForm')">取消</el-button>
        <el-button type="primary" @click="submitForms">暂存</el-button>
        <el-button type="primary" @click="submitForm('ruleForm')">提交审批</el-button>
      </el-form-item>
    </el-form>
    <!-- 操作记录 -->
    <div class="title">
      <p class="title_p">操作记录</p>
      <el-table size="small" border :data="recordsList">
        <el-table-column align="center" :formatter="operation" label="操作"></el-table-column>
        <el-table-column align="center" prop="content" label="审核意见"></el-table-column>
        <el-table-column align="center" prop="userName" label="操作人"></el-table-column>
        <el-table-column align="center" :formatter="createTime" label="操作时间"></el-table-column>
      </el-table>
    </div>
    <!-- 合同信息弹窗 -->
    <el-dialog title="合同菜单" :visible.sync="dialogTableVisible">
      <el-input v-model="tableConfig.queryStr" style="width:300px" placeholder="请输入关键字"></el-input>
      <el-button type="primary" @click="searchList">查询</el-button>
      <el-table :data="gridData" @row-click="handleRow">
        <el-table-column label="选项" width="55">
          <template slot-scope="scope">
            <el-radio v-model="radio" :label="scope.$index">&nbsp;</el-radio>
          </template>
        </el-table-column>
        <el-table-column property="contractName" label="合同名称"></el-table-column>
        <el-table-column property="contractCode" label="合同编号"></el-table-column>
        <el-table-column property="contractTypeName" label="合同类型"></el-table-column>
        <el-table-column property="contractAmount" label="合同金额"></el-table-column>
        <el-table-column property="payerName" label="付款方"></el-table-column>
        <el-table-column property="receiverName" label="收款方"></el-table-column>
      </el-table>
      <div class="paging">
        <el-pagination
          background
          layout="prev, pager, next, jumper"
          :current-page.sync="tableConfig.pageNum"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="tableConfig.pageSize"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :total="tableConfig.total"
        ></el-pagination>
      </div>
      <div class="dialogForm">
        <el-button type="primary" @click="formTable">确定</el-button>
        <el-button @click="dialogTableVisible = false">取消</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import upload from "@/components/common/Upload";
import utils from "@/common/utils";
export default {
  name: "editPayment",
  components: {
    upload
  },
  data() {
    const regPayAmount = (e, value, callback) => {
      // if (parseFloat(value) > this.ruleForm.notReturnAmount) {
      //   return callback(new Error("金额不得大于剩余返还款金额"))
      // }
      let reg = /^([0]|([1-9][0-9]*)|(([0]\.\d{1,}|[1-9][0-9]*\.\d{1,})))$/;
      if (!reg.test(value)) {
        return callback(new Error("只能输入正数或零"))
      }
      reg = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/;
      if (!reg.test(value)) {
        return callback(new Error("请保留2位小数"));
      }
      callback();
    }
    const numValidation = (e, value, callback) => {
      if(parseFloat(value) > this.ruleForm.payAmount) {
        return callback(new Error('实际付款金额不得大于付款金额（含税）！'))
      }
      let reg = /^([0]|([1-9][0-9]*)|(([0]\.\d{1,}|[1-9][0-9]*\.\d{1,})))$/;
      if (!reg.test(value)) {
        return callback(new Error("只能输入正数或零"))
      }
      reg = /^(([1-9][0-9]*)|(([0]\.\d{1,2}|[1-9][0-9]*\.\d{1,2})))$/
      if (!reg.test(value)) {
        return callback(new Error("请保留2位小数"));
      }
      callback();
    }
    const checkPhone = (e, value, callback) => {
      if (!(/^1[3|5|7|8]\d{9}$/.test(value) || /^0\d{2,3}-?\d{7,8}$/.test(value))) {
        callback(new Error('请输入正确格式号码！'));
      }
      callback()
    }
    return {
      code: "", //支付申请单
      devList: [], 
      provinceId: '', // 省份id
      recordsList: [], // 操作记录
      fileList: [],
      isContractHave: true,
      payerNameList: [],
      payerAccountList: [],
      provincesList: [],
      cityList: [],
      bankList: [],
      btnType: 1,
      tableConfig: {
        queryStr: "",
        projectId: "",
        pageSize: 10,
        pageNum: 1,
        total: 0
      },
      isBill: true, // 是否显示发票类型
      radio: "",
      items: [], // 项目列表
      purPayment: [
        {
          value: 1,
          label: "返还开发商"
        },
        {
          value: 2,
          label: "返还个人（员工）"
        },
        {
          value: 3,
          label: "通过第三方返还个人"
        },
        {
          value: 4,
          label: "购买购物卡（非经纪人奖励）"
        },
        {
          value: 5,
          label: "推广营销"
        },
        {
          value: 6,
          label: "其他"
        }
      ],
      ruleForm: {
        paymentCode: '',
        id: "",
        projectId: "", 
        devName: '',
        devId: '',
        projectClassify: "", // 是否是珠江项目
        projectName: "", // 项目名称
        totalAmount: "", // 返还款累计金额
        returnAmount: "", // 返还款已付金额
        frozenAmount: "", // 返还款冻结金额
        payUse: "", // 付款用途
        remark: "", // 付款摘要
        contractHave: -1, // 是否有合同
        contractAmount: "", // 合同总金额
        contractId: "", // 合同id
        contractName: "", // 合同名称
        contractCode: "", //  合同编号
        contractNature: "", // 合同性质
        taxRate: "", // 税率
        paymentType: "", // 结算支付方式
        notPayAmount: "", // 未付款金额
        paidAmountTotal: "", // 累计已付款金额
        payTax: "", // 税金
        payAmount: "", // 付款金额
        payAmountNoTax: "", // 付款金额不含税
        realAmount: "", // 实际付款金额
        billHava: "", // 是否有发票
        billType: "", // 发票类型
        taxType: "", // 计税方式
        file: "", // 附件
        /* 收款字段 */
        receiveName: "", // 收款方名称
        receiveType: "", // 收款方类型
        receiveAccount: "", // 收款方账号
        receiveBankBranch: "", // 收款方开户行
        receiveLinkNumber: "", // 收款方联行号
        receiveCardProvince: "", // 收款方 开卡省
        receiveCardCity: "", // 收款方 开卡市
        receiveAccountCode: "", // 收款方 开户编码
        receiveId: "", // 收款方 id
        receiveCardNum: "", // 收款方 纳税人识别号
        receivePhone: "", // 收款方电话
        /* 付款字段 */
        paymentName: "", // 付款方 名称
        paymentAccount: "", // 付款方账号
        paymentTaxNumber: "", // 付款方纳税人识别号
        paymentBankBranch: "", // 付款方开户行（支行）
      },
      rules: {
        projectId: [
          { required: true, message: "请选择项目名称", trigger: "change" }
        ],
        payUse: [
          { required: true, message: "请选择付款用途", trigger: "change" }
        ],
        remark: [
          { required: true, message: "请输入付款摘要", trigger: "blur" }
        ],
        contractName: [
          { required: true, message: "请输入合同名称", trigger: "blur" }
        ],
        payAmount: [
          { required: true, validator: regPayAmount,trigger: "blur" }
        ],
        paymentType: [
          { required: true, message: "请选择结算支付方式", trigger: "change" }
        ],
        billHava: [
          { required: true, message: "请选择是否有发票", trigger: "change" }
        ],
        billType: [
          { required: true, message: "请选择发票类型", trigger: "change" }
        ],
        taxType: [
          { required: true, message: "请选择计税方式", trigger: "change" }
        ],
        realAmount: [
          { required: true, validator: numValidation, trigger: "blur"}
        ],
        receiveName: [
          { required: true, message: "请输入收款方名称", trigger: "blur" }
        ],
        receiveType: [
          { required: true, message: "请选择收款方类型", trigger: "change" }
        ],
        receiveAccount: [
          { required: true, message: "请输入收款方账号", trigger: "blur" }
        ],
        receiveBankBranch: [
          { required: true, message: "请选择收款方开户行", trigger: "change" }
        ],
        receiveCardProvince: [
          { required: true, message: "请选择收款方开卡省", trigger: "change" }
        ],
        receiveCardCity: [
          { required: true, message: "请选择收款方开卡市", trigger: "change" }
        ],
        paymentName: [
          { required: true, message: "请选择付款方名称", trigger: "change" }
        ],
        paymentAccount: [
          { required: true, message: "请选择付款方账号", trigger: "change" }
        ],
        receivePhone: [
          { required: true,validator: checkPhone, trigger: "blur" }
        ],
        taxRate: [
          { required: true, message: "请输入税率", trigger: "blur" }
        ]
      },
      gridData: [], // 合同列表
      contractPro: {}, // 选择合同对应的对象
      dialogTableVisible: false
    };
  },
  created() {
    this.init(this.$route.query.id);
    this.records(this.$route.query.id);
    // 获取省份
    this.$axios.get("/city/provinces").then(res => {
      this.provincesList = res;
    });
  },
  computed: {
    userName() {
      let name = JSON.parse(window.localStorage.getItem("cmsUser")).name;
      return name;
    }
  },
  methods: {
    init(id) {
      this.ruleForm.id = id;
      this.$axios
        .post("/estate/project/select/projectsByParam")
        .then(res => {
          this.items = res;
        })
        .then(() => {
          this.$axios
            .post("/commission/developer/getById", { id: id })
            .then(res => {
              this.code = res.code;
              this.ruleForm.projectId = res.projectId;
              let objItem = this.items.find(item => {
                return item.estateProjectId === res.projectId;
              });
              this.ruleForm.projectName = objItem.projectName;
              this.ruleForm.devId = res.devId.toString();
              this.ruleForm.devName = res.devName;
              this.$axios.post('/estate/devs/select/mapParam',{estateProjectId:res.projectId}).then(res=>{
                this.devList = res;
              })
              if (res.url) {
                let file = JSON.parse(res.url);
                file.forEach(item => {
                  this.fileList.push(item.url);
                });
              }
              /* 新开发 */
              this.ruleForm.payUse = res.payUse; // 付款用途
              this.ruleForm.contractHave = res.contractHave; // 是否有合同
              if (res.contractHave) {
                this.isContractHave = true;
                this.ruleForm.contractId = res.contract.contractId; // 合同id
                this.ruleForm.contractName = res.contract.contractName; // 合同名称
                this.ruleForm.contractAmount = res.contract.contractAmount; // 合同总金额（含税）
                this.ruleForm.contractCode = res.contract.contractCode; // 合同编号
                this.ruleForm.contractNature = res.contract.contractNature; // 合同性质
                this.$axios
                .post("/commission/developer/getPaidAmount", {
                  contractId: res.contract.contractId
                })
                .then(res => {
                  this.ruleForm.paidAmountTotal = res; // 累计已付款金额
                  // 未付款金额 = （合同总金额 - 累计已付款金额）
                  this.ruleForm.notPayAmount = utils.formatFloat(
                    this.ruleForm.contractAmount - res,
                    2
                  );
                });
              } else {
                this.isContractHave = false;
              }
              this.ruleForm.remark = res.remark; // 付款摘要
              /* 付款信息 */
              this.ruleForm.payAmount = res.payAmount; // 付款金额（含税）
              this.ruleForm.payAmountNoTax = res.payAmountNoTax; // 付款金额（不含税）
              this.ruleForm.realAmount = res.realAmount; // 实际付款金额
              this.ruleForm.taxRate = (res.taxRate * 100); // 税率
              this.ruleForm.payTax = res.payTax; // 税金
              this.ruleForm.paymentType = res.paymentType; // 结算支付方式
              this.ruleForm.billHava = res.billHava; // 是否有发票
              if (res.billHava) {
                this.isBill = true;
                this.ruleForm.billType = res.billType; // 发票类型
              } else {
                this.isBill = false;
              }
              this.ruleForm.taxType = res.taxType; // 计税方式
              /* 收款方信息 */
              this.ruleForm.receiveId = res.receiveId;
              this.ruleForm.receiveName = res.receiveName;
              this.ruleForm.receiveAccount = res.receiveAccount; // 收款方账号
              this.ruleForm.receiveType = res.receiveType; // 收款方类型
              this.ruleForm.receiveBankBranch = res.receiveBankBranch; // 收款方开户行支行
              this.ruleForm.receiveAccountCode = res.receiveAccountCode; // 收款方开户编码
              this.ruleForm.receiveLinkNumber = res.receiveLinkNumber; // 收款方联行号
              this.ruleForm.receivePhone = res.receivePhone; // 收款方联系电话
              this.ruleForm.receiveCardNum = res.receiveCardNum; // 收款方纳税识别号
              this.ruleForm.receiveCardProvince = res.receiveCardProvince; // 收款方 开卡省
              this.ruleForm.receiveCardCity = res.receiveCardCity; // 收款方 开卡市
              /* 付款方信息 */
              this.ruleForm.payerId = res.payerId;
              this.ruleForm.paymentName = res.paymentName;
              this.ruleForm.paymentCode = res.paymentCode;
              this.ruleForm.paymentAccount = res.paymentAccount; // 付款方方账号
              this.ruleForm.paymentTaxNumber = res.paymentTaxNumber; // 付款方纳税人识别号
              this.ruleForm.paymentBankBranch = res.paymentBankBranch; // 付款方开户行支行
              this.$axios
                .post("/commission/developer/getNotReturnAmount", {
                  devId: res.devId,
                  contractHave: 1
                })
                .then(res => {
                  this.ruleForm.totalAmount = res.totalAmount;
                  this.ruleForm.returnAmount = res.returnAmount;
                  this.ruleForm.frozenAmount = res.frozenAmount;
                  this.ruleForm.notReturnAmount = res.notReturnAmount;
                  this.ruleForm.projectClassify = res.projectClassify;
                });
            });
        });
    },
    // tab切换
    btnClick(num) {
      this.btnType = num;
      this.$axios
        .post("/contract/api/contractUndersign/getInside")
        .then(res => {
          this.payerNameList = res;
        });
    },
    // 是否有合同
    radioChange(e) {
      if (e === 1) {
        this.isContractHave = true;
      } else {
        this.isContractHave = false;
        this.ruleForm.taxRate = "";
        this.ruleForm.receiveName = "";
        this.ruleForm.receiveType = "";
        this.ruleForm.receiveAccount = "";
        this.ruleForm.receiveCardProvince = ""; 
        this.ruleForm.receiveCardCity = "";
        this.ruleForm.receiveBankBranch = "";
        this.ruleForm.receiveLinkNumber = "";
        this.ruleForm.receiveAccountCode = "";
        /* 付款方 */
        this.ruleForm.paymentName = "";
        this.ruleForm.paymentAccount = "";  
        this.ruleForm.paymentTaxNumber = "";  
        this.ruleForm.paymentBankBranch = "";
      }
    },
    // 项目change事件
    itemsChange(val) {
      this.ruleForm.devId = "";
      let obj = this.items.find(item => {
        return item.estateProjectId === val;
      });
      this.ruleForm.projectName = obj.projectName; // 项目名称
      this.$axios.post('/estate/devs/select/mapParam',{estateProjectId:val}).then(res=>{
        this.devList = res;
      })
    },
    devFocus() {
      if(this.ruleForm.projectId === '') {
        return this.$message.warning('请先选择项目')
      }
    },
    // 楼盘名称
    devChange(val) {
      let obj = this.devList.find(item => {
          return item.devId === val
      })
      this.ruleForm.devName = obj.devName;
      this.$axios
      .post("/commission/developer/getNotReturnAmount", {
        devId: val,
        contractHave: 1
      })
      .then(res => {
        this.ruleForm.totalAmount = res.totalAmount;
        this.ruleForm.returnAmount = res.returnAmount;
        this.ruleForm.frozenAmount = res.frozenAmount;
        this.ruleForm.notReturnAmount = res.notReturnAmount;
        this.ruleForm.projectClassify = res.projectClassify;
      });
    },
    // 省份change
    provinceChange(val) {
      this.ruleForm.receiveCardCity = '';
      this.ruleForm.receiveBankBranch = '';
      this.provinceId = val;
      let obj = this.provincesList.find(item => {
        return item.provinceid === val;
      });
      this.ruleForm.receiveCardProvince = obj.province;
      this.$axios.get("/city/cityList/" + val).then(res => {
        this.cityList = res.cityList;
      });
    },
    // 城市change
    cityChange(val) {
      this.ruleForm.receiveBankBranch = '';
      let obj = this.cityList.find(item => {
        return item.cityId === val;
      });
      this.ruleForm.receiveCardCity = obj.city;
      this.$axios.post('commission/developer/getBankBranchName',{provinceId:this.provinceId,cityId: val}).then(res => {
        this.bankList = res;
      })
    },
    // 收款方 开户行支行focus
    bankFocus(e) {
      if(!this.provinceId || !this.ruleForm.receiveCardCity) {
        return this.$message.warning('请先选择开卡省-市！')
      }
    },
    // 收款方 开户行支行change
    bankChange(val) {
      this.ruleForm.receiveLinkNumber = val;
      let obj = this.bankList.find(item => {
        return item.linkNumber === val;
      })
      this.ruleForm.receiveBankBranch = obj.bankBranchName;
      this.ruleForm.receiveAccountCode = obj.openCode;
    },
    // 是否有发票
    billHavaChange(val) {
      if (val == 1) {
        this.isBill = true;
      } else {
        this.billType = "";
        this.isBill = false;
      }
    },
    // 付款金额（含税）--> 算出税金 和付款金额不含税
    focusAmount() {
      let num = this.ruleForm.taxRate / 100;
      this.ruleForm.payAmountNoTax = utils.formatFloat(
        this.ruleForm.payAmount / (1 + num),
        2
      );
      this.ruleForm.payTax = utils.formatFloat(
        this.ruleForm.payAmountNoTax * num,
        2
      );
    },
    // 获取合同信息焦点事件
    contracts() {
      if (this.ruleForm.projectId === '') {
        return this.$message.warning("请先选择项目！");
      }
      this.searchList();
    },
    handleRow(row) {
      this.radio = this.gridData.indexOf(row);
      this.contractPro = row;
    },
    // 合同信息列表
    searchList() {
      this.tableConfig.projectId = this.ruleForm.projectId;
      this.tableConfig.pageNum = 1;
      this.$axios
        .post("/contract/api/contractinfo/getcontractlistT", this.tableConfig)
        .then(res => {
          this.dialogTableVisible = true;
          this.gridData = res.list;
          this.tableConfig.total = res.total;
        });
    },
    // 选择合同信息事件
    formTable() {
      this.ruleForm.contractName = this.contractPro.contractName; // 合同名称
      if (this.ruleForm.contractName) {
        this.$refs.ruleForm.clearValidate("contractName");
      }
      /* 新开发 */
      this.ruleForm.contractId = this.contractPro.contractId; // 合同id
      this.ruleForm.contractAmount = this.contractPro.contractAmount; // 合同总金额（含税）（未付款金额是接口取的）
      this.ruleForm.contractCode = this.contractPro.contractCode; // 合同编号
      this.ruleForm.taxRate = this.contractPro.taxRate; // 合同税率
      /* 收款方信息 */
      this.ruleForm.receiveId = this.contractPro.receiverId; // 收款方id
      this.ruleForm.receiveName = this.contractPro.receiverName; // 收款方名称
      this.ruleForm.receiveAccount = this.contractPro.receiverBankNum; // 收款方账号
      this.ruleForm.receiveBankBranch = this.contractPro.receiverBankName; // 收款方开户行支行
      this.ruleForm.receiveAccountCode = this.contractPro.receiverBankCode; // 收款方开户编码
      this.ruleForm.receiveLinkNumber = this.contractPro.receiverLineNum; // 收款方联行号
      this.ruleForm.receiveCardNum = this.contractPro.receiverCardNum; // 收款方纳税识别号
      this.ruleForm.receiveCardProvince = this.contractPro.receiverRrovince; // 收款方 开卡省
      this.ruleForm.receiveCardCity = this.contractPro.receiverCity; // 收款方 开卡市
      /* 付款方信息 */
      this.ruleForm.payerId = this.contractPro.payerId; //付款方ID
      this.ruleForm.paymentName = this.contractPro.payerName; // 付款方名称
      this.ruleForm.paymentAccount = this.contractPro.payerBankNum; // 付款方方账号
      this.ruleForm.paymentTaxNumber = this.contractPro.payerCardNum; // 付款方纳税人识别号
      this.ruleForm.paymentBankBranch = this.contractPro.payerBankName; // 付款方开户行支行
      this.$axios
        .post("/commission/developer/getPaidAmount", {
          contractId: this.contractPro.contractId
        })
        .then(res => {
          this.ruleForm.paidAmountTotal = res; // 累计已付款金额
          // 未付款金额 = （合同总金额 - 累计已付款金额）
          this.ruleForm.notPayAmount = utils.formatFloat(
            this.contractPro.contractAmount - res,
            2
          );
          this.dialogTableVisible = false;
        });
    },
    // 合同分页
    handleSizeChange(size) {
      this.tableConfig.pageSize = size;
      this.searchList();
    },
    handleCurrentChange(page) {
      this.tableConfig.pageNum = page;
      this.searchList();
    },
    // 付款方名称change
    payerNameChange(val) {
      this.ruleForm.paymentTaxNumber = "";
      this.ruleForm.paymentBankBranch = "";
      this.ruleForm.paymentAccount = "";
      let obj = this.payerNameList.find(item => {
        return item.id === val;
      });
      this.ruleForm.paymentName = obj.companyName;
      this.ruleForm.paymentCode = obj.companyRelatedCode;
      this.payerAccountList = obj.bank;
      this.ruleForm.paymentTaxNumber = obj.companyTaxpayer; // 付款方纳税人识别号
    },
    // 付款方账号change
    payerAccountChange(val) {
      this.ruleForm.paymentBankBranch = "";
      let obj = this.payerAccountList.find(item => {
        return item.id === val;
      });
      this.ruleForm.paymentAccount = obj.bankAccount; // 付款方账号
      this.ruleForm.paymentBankBranch = obj.openingBank;
    },
    // 暂存
    submitForms() {
      this.rules = {};
      this.$refs.upload.submit().then(res => {
        let file = [];
        let createName = JSON.parse(window.localStorage.getItem("cmsUser"))
          .name;
        for (let item of res) {
          let name = item.substring(item.indexOf("/cms/") + 5, item.length);
          file.push({
            name: name,
            createName: createName,
            createTime: new Date().getTime(),
            url: item
          });
        }
        this.ruleForm.file = file.length > 0 ? JSON.stringify(file) : "";
        this.ruleForm.isH3 = 2;
        this.$axios
          .post("/commission/developer/add", this.ruleForm)
          .then(res => {
            this.$message({
              type: "success",
              message: "操作成功"
            });
            this.$router.push('./developerPayment');
          });
      });
    },
    // 提交
    submitForm(formName) {
      this.ruleForm.isH3 = 1;
      this.$refs.upload.submit().then(res => {
        let file = [];
        let createName = JSON.parse(window.localStorage.getItem("cmsUser"))
          .name;
        for (let item of res) {
          let name = item.substring(item.indexOf("/cms/") + 5, item.length);
          file.push({
            name: name,
            createName: createName,
            createTime: new Date().getTime(),
            url: item
          });
        }
        this.ruleForm.file = file.length > 0 ? JSON.stringify(file) : "";
        this.$refs[formName].validate(valid => {
          if (valid) {
            window.localStorage.removeItem("form");
            window.localStorage.setItem("form", JSON.stringify(this.ruleForm));
            this.$router.push({
              path: "./h3ViewProcess",
              query: {
                id: this.$route.query.id,
                edit: true
              }
            });
          } else {
            this.$message.error("存在必填项为空，不允许提交！");
          }
        });
      });
    },
    // 取消
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.$router.push("./developerPayment");
    },
    // 操作记录
    records(id) {
      this.$axios
        .post("/commission/developer/remark/getList", { id: id })
        .then(res => {
          this.recordsList = res;
        });
    },
    // 格式化记录操作状态
    operation(row) {
      if (row.checkStatus === 0) {
        return "未审核";
      } else if (row.checkStatus === 1) {
        return "审核成功";
      } else if (row.checkStatus === 2) {
        return "审核拒绝";
      }
    },
    createTime(row) {
      return utils.getTimeString(row.createTime);
    }
  }
};
</script>
<style lang="stylus" scoped>
.addPayment {
  .select_item {
    width: 320px;
  }

  .title_p{
    font-size: 14px;
    margin-left: 15px;
    line-height: 35px;
    position: relative;
    font-weight: bold;
  }

  .title > p::before {
    content: '';
    height: 11px;
    border: 2px solid #409EFF;
    position: absolute;
    left: -10px;
    bottom: 10px;
  }

  .tabs .el-button {
    margin-right: 25px;
    padding-left: 35px;
    padding-right: 35px;
  }

  .formCenter {
    margin: 0 auto;
    text-align: right;
    width: 80%;
  }

  .paging {
    margin-top: 15px;
    text-align: right;
  }

  .dialogForm {
    text-align: right;
    margin-top: 20px;
  }

  .form_algin {
    display: flex;
  }

  .form_algin>div {
    display: flex;
    flex-direction: column;
    width: 50%;
    /* align-items: center; */
    /* justify-content: center; */
  }

  .el-form {
    .el-input {
      width: 320px;
    }
  }
}
</style>


